<template>
  <div class="Thenewaddress">
    <div class="table">
      <div class="tuo">
        <div class="tuo-1">
          <div class="tuo-2"></div>
          <span>发票列表</span>
        </div>
        <div>
          <el-button
            ref="fromData"
            @click="addMethod('fromData')"
            size="mini"
            type="primary"
            >新增
          </el-button>
        </div>
      </div>
      <!-- 发票列表 -->
      <div class="tables">
        <el-table
          border
          :data="tableList"
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          style="width: 100%"
        >
         <el-table-column prop="invoiceType" label="发票类型" width="95">
            <template slot-scope="scope">
              <template v-if="scope.row.invoiceType == 'company'">公司</template>
              <template v-if="scope.row.invoiceType == 'individual'">个人</template>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceHead" label="发票抬头" width="100">
          </el-table-column>
          <el-table-column prop="invoiceNumber" label="识别号"> </el-table-column>

       
          <el-table-column prop="invoiceAddress" label="注册地址" width="230">
          </el-table-column>
          <el-table-column prop="phone" label="电话">
          </el-table-column>
          <el-table-column prop="bankName" label="银行名称" width="95">
          </el-table-column>
             <el-table-column prop="bankAccount" label="银行账号" width="95">
          </el-table-column>
             <el-table-column prop="isDefault" label="是否默认" width="95">
            <template slot-scope="scope">
              <template v-if="scope.row.isDefault == 'yes'">是</template>
              <template v-if="scope.row.isDefault == 'no'">否</template>
              <template v-if="scope.row.isDefault == null">否</template>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作 " width="200">
            <template slot-scope="scope">
              <el-button
                style="background-color: #6090ec; color: #fff"
                size="mini"
                @click="editMethod(scope.row)"
                >修改
              </el-button>
              <el-button
                @click="delMethod(scope.row)"
                style="background-color: #ff0000; color: #fff"
                size="mini"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增地址 -->
    <el-dialog
      title="发票"
      :visible.sync="addDialogVisible"
      :close-on-click-modal="false"
      width="40%"
       center
    >
      <el-form
        :model="fromData"
        :rules="fromDatarules"
        ref="fromData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类型" prop="invoiceType">
          <el-radio @change="radioChange()" v-model="fromData.invoiceType" label="company">公司</el-radio>
          <el-radio @change="radioChange()"  v-model="fromData.invoiceType" label="individual">个人</el-radio>
        </el-form-item>
       
        <el-form-item label="抬头" prop="invoiceHead">
          <el-input size="mini" v-model="fromData.invoiceHead" style="width:70%"></el-input>
        </el-form-item>
        <el-form-item v-if="fromData.invoiceType=='company'" label="识别号" prop="invoiceNumber">
          <el-input size="mini" v-model="fromData.invoiceNumber" style="width:70%"></el-input>
        </el-form-item>
        <el-form-item v-if="fromData.invoiceType=='company'" label="注册地址" >
          <el-input size="mini" v-model="fromData.invoiceAddress" style="width:70%"></el-input>
        </el-form-item>
        <el-form-item v-if="fromData.invoiceType=='company'" label="银行卡账号" >
          <el-input size="mini" v-model="fromData.bankAccount"  @blur="elInputBlur" style="width:70%"></el-input>
        </el-form-item>
         <el-form-item v-if="fromData.invoiceType=='company'"   label="银行名称" >
          <el-input size="mini" v-model="fromData.bankName"   @input="inpChange($event)" disabled style="width:70%"></el-input>
        </el-form-item>
            <el-form-item v-if="fromData.invoiceType=='company'" label="电话">
          <el-input size="mini" v-model="fromData.phone" style="width:70%"></el-input>
        </el-form-item>
        <el-form-item label="是否默认" prop="isDefault">
          <el-radio v-model="fromData.isDefault" label="yes">是</el-radio>
          <el-radio v-model="fromData.isDefault" label="no">否</el-radio>
        </el-form-item>
       
      </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="submitForm('fromData')" size="mini" type="primary"
            >确定</el-button
          >
          <el-button
            @click="addDialogVisible = false"
            size="mini"
            type="primary"
            >取消</el-button
          >
        </span>
    </el-dialog>
    <!-- 删除弹窗 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%" center>
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delUserInvoiceVoucher">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Thenewaddress",
  // 父子传递参数
  props: ["MembershipInformationData"],
  data() {
    return {
      // 用户id
      userId: "",
      // 列表
      tableList: [],
      // 新增修改数据
      fromData: {
        id: "",
        invoiceType: "company",
        invoiceHead: "",
        invoiceNumber: "",
        invoiceAddress: "",
        phone: "",
        bankName: "",
        bankAccount: "",
        isDefault:'no'
      },
      //校验
      fromDatarules: {
        invoiceType: [{ required: true, message: "请输入", trigger: "change" }],
        invoiceHead: [{ required: true, message: "请输入", trigger: "blur" }],
        invoiceNumber: [{ required: true, message: "请输入", trigger: "blur" }],
        invoiceAddress: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入", trigger: "blur" }],

        bankAccount: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        isDefault: [
          { required: true, message: "请输入", trigger: "change" },
        ],
      },
      // 新增弹窗显示
      addDialogVisible: false,
      // 删除弹窗
      delDialogVisible: false,
    };
  },
  methods: {
    radioChange(){
    this.$forceUpdate()

    },
    // 列表
    getUserInvoiceVoucherList() {
      this.$axios
        .getUserInvoiceVoucherList({
          userId: this.userId,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.tableList = res.data;
          }
        });
    },
    // 新增地址
    getaddUserInvoiceVoucher() {
      this.$axios
        .getaddUserInvoiceVoucher({
          userId: this.userId,
          invoiceType: this.fromData.invoiceType,
          invoiceHead: this.fromData.invoiceHead,
          invoiceNumber: this.fromData.invoiceNumber,
          invoiceAddress: this.fromData.invoiceAddress,
          phone: this.fromData.phone,
          bankName: this.fromData.bankName,
          bankAccount: this.fromData.bankAccount,
          isDefault: this.fromData.isDefault,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addDialogVisible = !this.addDialogVisible;
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getUserInvoiceVoucherList();
          }
        });
    },
    // 修改地址
    getupdUserInvoiceVoucher() {
      this.$axios
        .getupdUserInvoiceVoucher({
          id: this.fromData.id,
          invoiceType: this.fromData.invoiceType,
          invoiceHead: this.fromData.invoiceHead,
          invoiceNumber: this.fromData.invoiceNumber,
          invoiceAddress: this.fromData.invoiceAddress,
          phone: this.fromData.phone,
          bankName: this.fromData.bankName,
          bankAccount: this.fromData.bankAccount,
          isDefault: this.fromData.isDefault,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addDialogVisible = !this.addDialogVisible;
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getUserInvoiceVoucherList();
          }
        });
    },

    // 删除接口
    delUserInvoiceVoucher() {
      this.$axios
        .delUserInvoiceVoucher({
          id: this.fromData.id,
        })
        .then((res) => {
          console.log(res);
          this.fromData.id = "";
          if (res.code == "00000") {
            this.delDialogVisible = !this.delDialogVisible;
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getUserInvoiceVoucherList();
          }
        });
    },

    // 新增按钮
    addMethod(formName) {
      this.addDialogVisible = !this.addDialogVisible;
      this.fromData = {};
      this.fromData.id = "";
      this.fromData.invoiceType = "company";
    },
    // 修改按钮
    editMethod(row) {
      this.fromData.id = row.id;
      this.$axios
        .getUserInvoiceVoucherInfo({
          id: this.fromData.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addDialogVisible = !this.addDialogVisible;
            this.fromData = res.data;
            this.fromData.id = res.data.id;
          }
        });
    },
    // 删除点击事件
    delMethod(row) {
      this.fromData.id = row.id;
      this.delDialogVisible = !this.delDialogVisible;
    },
    // 确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fromData.id == "") {
            this.getaddUserInvoiceVoucher();
          } else {
            this.getupdUserInvoiceVoucher();
          }
          // this.$refs[formName].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
      // 卡号输入框失去焦点事件
    elInputBlur(row) {
       this.$axios
          .getBankCardById({
            cardNumber: this.fromData.bankAccount,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "00000") {
              this.fromData.bankName = res.data.bankName;
              this.inpChange()
            }
          });


          console.log(this.fromData)
    },
        // input强制刷新
     inpChange(e) {
      this.$forceUpdate();
    },
  },
  mounted() {
    this.userId = this.$route.params.customerId;
    this.getUserInvoiceVoucherList();
  },
};
</script>
<style scoped>
.Thenewaddress {
  height: 100vh;
  background-color: #f7f7f7;
}

.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.tuo-1 {
  display: flex;
}

.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}

.table {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0.1px;
}

.tabs {
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 20px;
}

.tables {
  margin-top: 10px;
  display: flex;
  /* justify-content:space-between; */
}

.tables-1 {
  margin-right: 10px;
  width: 40%;
}

.tables-2 {
  width: 60%;
}

/* .add {
  width: 642px;
  height: 326px;
  background-color: #fff;
  border: 1px solid #c4c4c4;
} */
.pop-9 {
  font-size: 11px;
  width: 60px;
  padding-top: 5px;
}

.pop-8 {
  font-size: 11px;
  width: 60px;
  padding-top: 10px;
}

.pop {
  margin-left: 20px;
}

.pop-1 {
  display: flex;
  width: 250px;
}

.pop-1-2 {
  display: flex;
  margin-bottom: 12px;
  margin-right: 10px;
}

.pop-2 {
  display: flex;
}

.pop-3 {
  margin-left: 10px;
  margin-top: 20px;
}

.too-1-1 {
  display: flex;
  margin-left: 20px;
  /* padding-top: 20px; */
  font-size: 20px;
}

.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}

.lan {
  margin-top: 5px;
  color: #2f80ed;
  font-size: 11px;
}
</style>